<template>
  <div>
    购物车
    <common-head title="购物车"></common-head>
    <div class="warp">
      <div class="items">
        <van-swipe-cell v-for="(item, index) in items" :key="item.id">
          <div class="item">
            <van-checkbox
              @click="changeItemSelect(index)"
              v-model="item.selected"
              checked-color="red"
            />
            <van-card
              :num="item.number"
              :price="item.price"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper
                  @change="changekNum(item.key, item.number)"
                  v-model="item.number"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              @click="delItem(item.key)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox checked-color="red" v-model="allChecked"
          >全选</van-checkbox
        >
      </van-submit-bar>
      <common-tab></common-tab>
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import CommonTab from '../../components/CommonTab.vue'
import { readCart, fetchCartNum, delCartNum, changeItemSelect } from 'api'
import { getToken } from 'utils'
import { Dialog } from 'vant'
export default {
  name: 'cart',
  data () {
    return {
      items: [],
      total: 0
    }
  },
  created () {
    this.readCart()
  },
  watch: {
    items () {
      this.$store.commit('cart/set_items', this.items)
    }
  },
  methods: {
    // 点击提交提单到添加联系人
    onSubmit () {
      this.$router.push('/submitOrder')
    },
    // 购物车选中状态，单选
    // 传参第二种写法，上面传index 根据下标
    changeItemSelect (index) {
      const { key, selected } = this.items[index]
      changeItemSelect({
        key,
        selected,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    // 移除购物车数据
    delItem (key) {
      delCartNum({
        key: key,
        token: getToken()
      }).then(res => {
        console.log(res)
        Dialog.confirm({
          title: '删除商品',
          message: '您确认删除吗？'
        })
          .then(() => {
            // on confirm
            if (res.data.code === 0) {
              this.items = res.data.data.items
              this.total = res.data.data.price
            }
            if (res.data.code === 700) {
              this.items = []
              this.total = 0
            }
          })
      })
    },
    // 进步器，修改购买数量
    changekNum (a, b) {
      fetchCartNum({
        key: a,
        number: b,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    // 读取购物车数据
    readCart () {
      readCart({
        token: getToken()
      }).then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    }
  },
  computed: {
    allChecked: {
      get () {
        return this.items.length === 0 ? false : this.items.every((item) => item.selected)
      },
      set (val) {
        // console.log(val, 1111)
        const keys = []
        this.items.forEach(item => {
          keys.push(item.key)
          changeItemSelect({
            key: keys.join(','),
            selected: val,
            token: getToken()
          }).then((res) => {
            // console.log(res)
            if (res.data.code === 0) {
              this.items = res.data.data.items
              this.total = res.data.data.price
            }
          })
        })
      }
    }
  },
  components: { CommonTab, CommonHead }
}
</script>

<style lang="scss" scoped>
.warp {
  position: fixed;
  top: 46px;
  bottom: 100px;
  left: 0;
  right: 0;
  overflow: auto;
  .item {
    display: flex;
    background-color: #fafafa;
    .van-card {
      flex: 1;
    }
    /deep/.van-checkbox {
      margin-left: 5px;
    }
  }
  .van-submit-bar {
    margin-bottom: 50px;
  }
  .delete-button {
    height: 100%;
  }
}
</style>
